<template>
  <div class="panel-item">
    <div class="panel-title">
      {{ getPanelTitle() }}
    </div>
    <div class="panel-content">
      <el-tabs v-model="activeTab" type="card" @tab-click="handleTabChange">
        <!-- 动态渲染所有打印类型的不同分类 -->
        <template v-if="printFields && printType">
          <el-tab-pane 
            :label="getFieldCategories().title"
            name="order"
          >
            <div class="section-header">
              <el-button size="small" @click="addSectionTitle()" type="primary">添加自定义内容</el-button>
              <el-button size="small" @click="addTable()" type="primary">添加表格</el-button>
              <el-switch 
                v-model="enableTextCustomization" 
                active-text="启用自定义设置" 
                inactive-text="" 
                style="margin-left: 15px;"
              ></el-switch>
            </div>
            
            <!-- 文本自定义设置面板 -->
            <div v-if="enableTextCustomization" class="text-customization-panel">
              <div class="customization-title">文本字段自定义设置</div>
              <div class="customization-controls">
                <div class="control-item">
                  <span class="control-label">字体大小(px):</span>
                  <el-slider v-model="customFontSize" :min="8" :max="36" :step="1" show-input @input="handleFontSizeChange"></el-slider>
                </div>
                <div class="control-item">
                  <span class="control-label">文本宽度(mm):</span>
                  <el-slider v-model="customTextWidth" :min="10" :max="100" :step="1" show-input :disabled="autoAdjustSize"></el-slider>
                </div>
                <div class="control-item">
                  <span class="control-label">文本高度(mm):</span>
                  <el-slider v-model="customTextHeight" :min="3" :max="100" :step="1" show-input :disabled="autoAdjustSize"></el-slider>
                </div>
                <div class="auto-adjust-control">
                  <el-checkbox v-model="autoAdjustSize">自动计算宽高</el-checkbox>
                  <el-tooltip content="启用后，系统将根据字体大小自动计算适合的宽度和高度" placement="top">
                    <i class="el-icon-question" style="margin-left: 5px; color: #909399;"></i>
                  </el-tooltip>
                </div>
              </div>
              <div class="customization-preview">
                <div class="preview-title">预览效果</div>
                <div class="preview-content" :style="{
                  fontSize: `${customFontSize}px`, 
                  width: `${mmToPx(customTextWidth, pxPerMm.value)}px`,
                  height: `${mmToPx(customTextHeight, pxPerMm.value)}px`,
                  lineHeight: `${mmToPx(customTextHeight, pxPerMm.value)}px`
                }">
                  示例文本
                </div>
              </div>
            </div>
            
            <div class="field-group">
              <div class="checkbox-grid">
                <template v-for="field in getCategoryFields('order')" :key="field.key">
                  <el-checkbox v-if="field.type !== 'line'"
                    v-model="printFields[field.key]" 
                    @change="(val) => handleFieldSelect(field.key, field.label, field.textTemplate, field.type)"
                    >
                    <div class="field-item" 
                      draggable="true" 
                      @dragstart="(event) => handleDragStart(event, field)" 
                      :title="'拖拽到画布添加字段'"
                    >
                      {{ field.label }}{{ field.type === 'barcode' ? '(条形码)' : '' }}
                    </div>
                  </el-checkbox>
                </template> 
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane 
            label="扩展操作"
            name="extend" >
            <div class="field-group">
              <div class="line-customization-panel">
                <div class="customization-title">线条设置</div>
                <div class="customization-controls">
                  <div class="control-item">
                    <span class="control-label">水平线长度(mm):</span>
                    <el-slider v-model="horizontalLineLength" :min="10" :max="200" :step="1" show-input @input="updateHorizontalLine"></el-slider>
                  </div>
                  <div class="control-item">
                    <span class="control-label">垂直线高度(mm):</span>
                    <el-slider v-model="verticalLineHeight" :min="10" :max="200" :step="1" show-input @input="updateVerticalLine"></el-slider>
                  </div>
                </div>
              </div>
              <div class="checkbox-grid">
                <template v-for="field in getCategoryFields('order')" :key="field.key">
                  <el-button
                    v-if="field.type === 'line'"
                    size="small"
                    @click="handleFieldSelect(field.key, field.label, field.textTemplate,field.type)"
                    draggable="true" 
                    @dragstart="(event) => handleDragStart(event, field)" 
                    :title="'拖拽到画布添加字段'"
                >
                  {{ field.label }}
                  </el-button>
                  
                </template> 
              </div>
            </div>
          </el-tab-pane>
        </template>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, watch, computed, inject, nextTick } from 'vue';
import { useRoute } from 'vue-router';
import {
  mmToPx,
} from '../utils/canvasUtils';
// 获取路由对象
const route = useRoute();

// 注入打印模板字段配置
const printTemplateFields = inject('printTemplateFields', {});

// 注入父组件的模板类型
const templateType = inject('templateType', 'product');
// 定义事件
const emit = defineEmits(['field-selected', 'field-unselected', 'add-section-title', 'add-table']);
const pxPerMm = ref(3.78);
// 当前激活的标签页
const activeTab = ref('');

// 添加文本自定义相关的响应式状态
const enableTextCustomization = ref(false);
const customFontSize = ref(14);
const customTextWidth = ref(35);
const customTextHeight = ref(5);
const autoAdjustSize = ref(true);

// 添加线条自定义相关的响应式状态
const horizontalLineLength = ref(50);
const verticalLineHeight = ref(50);

// 字体大小变化时自动计算宽高
const handleFontSizeChange = () => {
  if (autoAdjustSize.value) {
    // 计算适合的宽度：字体大小 * 2.5（经验值）
    customTextWidth.value = Math.round(customFontSize.value * 2.5);
    
    // 调整高度计算逻辑，使14px对应5mm高度
    // 使用线性比例关系: height = (fontSize / 14) * 5
    customTextHeight.value = Math.round((customFontSize.value / 14) * 5);
    
    // 确保最小值
    customTextWidth.value = Math.max(customTextWidth.value, 10);
    customTextHeight.value = Math.max(customTextHeight.value, 5);
    
    console.log(`自动调整宽高: 字体=${customFontSize.value}px, 宽度=${customTextWidth.value}mm, 高度=${customTextHeight.value}mm`);
  }
};

// 更新水平线长度
const updateHorizontalLine = (value) => {
  // 更新水平线的配置
  horizontalLine.value.Line[2] = value;
  horizontalLine.value.width = value;
  console.log(`更新水平线长度: ${value}mm`);
};

// 更新垂直线高度
const updateVerticalLine = (value) => {
  // 更新垂直线的配置
  verticalLine.value.Line[3] = value;
  verticalLine.value.height = value;
  console.log(`更新垂直线高度: ${value}mm`);
};

// 监听自动调整状态变化
watch(autoAdjustSize, (newValue) => {
  if (newValue) {
    // 启用自动调整时，立即计算一次
    handleFontSizeChange();
  }
});

const horizontalLine = ref({
  key: 'horizontalLine',
  label: '水平线',
  type: 'line',
  textTemplate: '',
  position: { x: 20, y: 20 },
  Line:[0, 0, 50, 0],
  stroke: '#000000',
  strokeWidth: 1,
  width: 50,
  height: 1,
  strokeDashArray: null, // 实线
  originX: 'left', // 改为left使线条起点位于指定位置
  originY: 'center',
  borderColor: '#5E9ED6',
  cornerColor: '#5E9ED6',
  cornerSize: 6,
  transparentCorners: false,
  hasControls: false,
  lockRotation: true,
  customType: 'horizontalLine'
})
const verticalLine = ref({
  key: 'verticalLine',
  label: '垂直线',
  type: 'line',
  textTemplate: '',
  position: { x: 20, y: 20 },
  Line:[0, 0, 0, 50],
  stroke: '#000000',
  strokeWidth: 1,
  width: 1,
  height: 50,
  strokeDashArray: null, // 实线
  originX: 'left', // 改为left使线条起点位于指定位置
  originY: 'center',
  borderColor: '#5E9ED6',
  cornerColor: '#5E9ED6',
  cornerSize: 6,
  transparentCorners: false,
  hasControls: false,
  lockRotation: true,
  customType: 'verticalLine'
})

// 获取打印类型，优先使用从父组件注入的类型，fallback到路由参数
const printType = computed(() => {
  // 优先使用注入的templateType
  if (templateType && templateType.value) {
    return templateType.value;
  }
  // 回退到路由参数
  return route.query.type || 'product';
});



// 定义打印字段状态
const printFields = inject('printFields', {});

// 初始化打印字段状态
const initPrintFields = () => {
  const currentType = printType.value;
  console.log('PrintItemsPanel: 执行字段初始化，当前类型:', currentType);
  
  // 清空当前字段状态
  Object.keys(printFields).forEach(key => {
    delete printFields[key];
  });
  
  // 检查当前类型配置是否存在
  if (!printTemplateFields[currentType] || 
      !printTemplateFields[currentType].fields || 
      !printTemplateFields[currentType].fields.order) {
    console.warn(`PrintItemsPanel: 未找到类型 ${currentType} 的字段配置，初始化失败`);
    return;
  }
  
  // 添加线条字段
  printTemplateFields[currentType].fields.order.push(horizontalLine.value, verticalLine.value);   
  
  // 根据配置对象初始化所有可能的字段
  const fieldsObj = printTemplateFields[currentType].fields;
  for (const category in fieldsObj) {
    if(Array.isArray(fieldsObj[category])){
      fieldsObj[category].forEach(field => {
        printFields[field.key] = false;
      });
    }
  }
 
  activeTab.value = 'order';  
};

// 获取当前打印类型的字段分类
const getFieldCategories = () => {
  if (printTemplateFields[printType.value]) {
    return printTemplateFields[printType.value];
  }
  return {};
};

// 获取分类标签
const getCategoryLabel = (category) => {
  const categoryLabels = {
    basic: '基础字段',
    specification: '规格信息',
    order: '单据信息',
    supplier: '供应商信息',
    customer: '客户信息',
    product: '商品信息',
    warehouse: '仓库信息',
    time: '时间信息',
    operation: '操作信息'
  };
  
  return categoryLabels[category] || category;
};

// 获取分类下的字段
const getCategoryFields = (category) => {
  if (printTemplateFields[printType.value] && printTemplateFields[printType.value].fields[category]) {
    return printTemplateFields[printType.value].fields[category];
  }
  return [];
};

// 处理字段选择
const handleFieldSelect = (key, label, textTemplate, type = 'text') => {
  // 查找原始字段配置，从printTemplateFields中获取position和style
  const originalField = findOriginalField(key);
  
  console.log(`------------------------`);
  console.log(`字段选择事件触发：${key}`);
  console.log(`字段类型: ${type}, 是条形码吗? ${type === 'barcode' ? '是' : '否'}`);
  console.log(`原始字段配置:`, originalField);
  console.log(`原始文本模板: ${textTemplate}`);
  
  // 获取原始样式和宽度
  const originalFontSize = originalField?.style?.fontSize || 14;
  const originalWidth = originalField?.width || 35;
  const originalHeight = originalField?.height || 5;
  
  const fieldConfig = {
    key,
    label,
    type, // 直接使用传入的type，不做修改
    textTemplate,
    // 使用原始配置中的position和style
    position: originalField ? originalField.position : { x: 20, y: 20 },
    style: originalField ? { ...originalField.style } : { fontSize: originalFontSize, bold: false, color: "#000" },
    border: originalField ? originalField.border : { show: true, color: '#333333', width: 1, top: false, right: false, bottom: false, left: false },
    width: originalWidth,
    height: originalHeight,
  };
  
  // 如果启用了文本自定义且当前字段是文本类型，则应用自定义设置
  if (enableTextCustomization.value && type === 'text') {
    console.log(`应用自定义文本设置: 字体大小=${customFontSize.value}px, 宽度=${customTextWidth.value}mm, 高度=${customTextHeight.value}mm`);
    // 更新样式中的字体大小
    fieldConfig.style.fontSize = customFontSize.value;
    // 更新字段宽度和高度
    fieldConfig.width = customTextWidth.value;
    fieldConfig.height = customTextHeight.value;
    
    // 如果启用了自动调整，确保宽高与字体大小匹配
    if (autoAdjustSize.value) {
      // 这里已经通过handleFontSizeChange()计算过，直接使用计算后的值即可
      console.log(`使用自动计算的宽高值: 宽度=${customTextWidth.value}mm, 高度=${customTextHeight.value}mm`);
    }
  } else if (type === 'text') {
    // 未启用自定义设置时，确保使用原始值
    console.log(`使用原始设置: 字体大小=${originalFontSize}px, 宽度=${originalWidth}mm, 高度=${originalHeight}mm`);
    fieldConfig.style.fontSize = originalFontSize;
    fieldConfig.width = originalWidth;
    fieldConfig.height = originalHeight;
  }
  
  // 如果是条形码类型，添加额外的条形码相关配置
  if (type === 'barcode') {
    console.log(`检测到条形码类型，添加条形码特定配置`);
    fieldConfig.barcodeFormat = originalField?.barcodeFormat || 'CODE128';
    fieldConfig.displayValue = true;
    fieldConfig.barcodeValue = originalField?.barcodeValue || '123456789012';
  }
  if (type === 'line') {
    console.log(`检测到线条类型，添加线条特定配置`);
    fieldConfig.Line = originalField?.Line || [0, 0, 45, 0];
    fieldConfig.customType = originalField ? originalField.customType : ''; 
    fieldConfig.stroke = originalField?.stroke || '#000000';
    fieldConfig.strokeWidth = originalField?.strokeWidth || 1;
    fieldConfig.strokeDashArray = originalField?.strokeDashArray || null; // 实线
    fieldConfig.originX = originalField?.originX || 'left'; // 改为left使线条起点位于指定位置
    fieldConfig.originY = originalField?.originY || 'center';
    fieldConfig.borderColor = originalField?.borderColor || '#5E9ED6';
    fieldConfig.cornerColor = originalField?.cornerColor || '#5E9ED6';
    fieldConfig.cornerSize = originalField?.cornerSize || 6;
    fieldConfig.transparentCorners = originalField?.transparentCorners || false;
    fieldConfig.hasControls = originalField?.hasControls || true;
  }
  
  console.log(`发送字段配置:`, fieldConfig);
  if(fieldConfig.type !== 'line'){
    if (printFields[key]) {
      // 勾选了字段
      console.log(`字段${key}被勾选，发送field-selected事件`);
      emit('field-selected', fieldConfig);
    } else {
      // 取消勾选
      console.log(`字段${key}被取消勾选，发送field-unselected事件`);
      emit('field-unselected', key);
    }
  }else {
   
    emit('field-selected', fieldConfig);
  }
  
  console.log(`------------------------`);
};

// 根据key查找原始字段配置
const findOriginalField = (key) => {
  if (!printTemplateFields[printType.value]) return null;
  
  const fieldsObj = printTemplateFields[printType.value].fields;
  for (const category in fieldsObj) {
    if(Array.isArray(fieldsObj[category])){
        const field = fieldsObj[category].find(f => f.key === key);
        if (field) return field;
    }
    
  }
  
  return null;
};


// 处理标签页切换
const handleTabChange = (tab) => {
  activeTab.value = tab.props.name;
};

// 监听模板类型变化
watch(() => templateType.value, (newValue, oldValue) => {
  console.log('PrintItemsPanel: 模板类型变化，重新初始化字段', newValue);
  // 确保当前类型存在于配置中
  if (printTemplateFields[newValue] && 
      printTemplateFields[newValue].fields && 
      printTemplateFields[newValue].fields.order) {
    // 重新初始化字段
    initPrintFields();
  } else {
    console.warn(`PrintItemsPanel: 未找到类型 ${newValue} 的字段配置`);
  }
}, { immediate: true });

// 添加分类标题
const addSectionTitle = () => {
  emit('add-section-title');
};

// 添加表格
const addTable = () => {
  emit('add-table');
};

// 处理拖拽开始事件
const handleDragStart = (event, field) => {
  console.log('开始拖拽对象:', field);
  if(printFields[field.key]){
	  return
  }
  
  // 创建字段的拷贝，避免修改原始字段
  const fieldCopy = JSON.parse(JSON.stringify(field));
  
  // 如果启用了文本自定义设置，且拖拽的是文本字段，则应用自定义设置
  if (enableTextCustomization.value && fieldCopy.type === 'text') {
    console.log(`应用自定义文本设置到拖拽对象: 字体大小=${customFontSize.value}px, 宽度=${customTextWidth.value}mm, 高度=${customTextHeight.value}mm`);
    
    // 确保style对象存在
    if (!fieldCopy.style) {
      fieldCopy.style = {};
    }
    
    // 应用自定义设置
    fieldCopy.style.fontSize = customFontSize.value;
    fieldCopy.width = customTextWidth.value;
    fieldCopy.height = customTextHeight.value;
    
    // 如果启用了自动调整，确保宽高与字体大小匹配
    if (autoAdjustSize.value) {
      // 这里使用的是经过handleFontSizeChange计算后的值，无需重新计算
      console.log(`使用自动计算的宽高值: 宽度=${customTextWidth.value}mm, 高度=${customTextHeight.value}mm`);
    }
  }
  
  // 确保拖拽数据对象中使用的是毫米值，因为画布处理时需要的是毫米单位
  // 无需转换为像素，实际画布会根据自己的pxPerMm进行转换
  // 记录当前的毫米值到console，以便调试
  console.log(`拖拽数据对象的毫米值: 水平线长度=${fieldCopy.Line?.[2] || 0}mm, 垂直线高度=${fieldCopy.Line?.[3] || 0}mm`);
  event.dataTransfer.setData('text/plain', JSON.stringify(fieldCopy));
  
  // 设置拖拽效果
  event.dataTransfer.effectAllowed = 'copy';
  
  // 使用自定义光标样式
  const dragImage = document.createElement('div');
  if(fieldCopy.type === 'line'){
    if(fieldCopy.key.includes('horizontalLine')){
      // 修复水平线预览问题
      // 创建一个容器确保线条可见
      const lineWidth = mmToPx(fieldCopy.Line[2], pxPerMm.value);
      dragImage.style.width = lineWidth+(lineWidth*1.5) + 'px'; // 限制最大宽度为300px
      dragImage.style.height = '20px'; // 增加高度以确保线条可见
      dragImage.style.position = 'relative'; // 使用相对定位
      
      // 创建实际的线条元素
      const lineElement = document.createElement('div');
      lineElement.style.position = 'absolute';
      lineElement.style.top = '10px'; // 垂直居中
      lineElement.style.left = '0';
      lineElement.style.width = lineWidth + 'px';
      lineElement.style.height = '2px';
      lineElement.style.backgroundColor = '#000000';
      
      // 将线条添加到拖拽图像中
      dragImage.appendChild(lineElement);
      
      console.log(`创建水平线预览: 长度=${fieldCopy.Line[2]}mm, 像素=${lineWidth}px`);
    } else {
      // 垂直线预览
      const lineHeight = mmToPx(fieldCopy.Line[3], pxPerMm.value);
      dragImage.style.width = '20px'; // 增加宽度以确保线条可见
      dragImage.style.height = lineHeight+(lineHeight*1.5) + 'px'; // 限制最大高度为300px
      dragImage.style.position = 'relative';
      
      // 创建实际的线条元素
      const lineElement = document.createElement('div');
      lineElement.style.position = 'absolute';
      lineElement.style.top = '0';
      lineElement.style.left = '10px'; // 水平居中
      lineElement.style.width = '2px';
      lineElement.style.height = lineHeight + 'px';
      lineElement.style.backgroundColor = '#000000';
      
      // 将线条添加到拖拽图像中
      dragImage.appendChild(lineElement);
      
      console.log(`创建垂直线预览: 高度=${fieldCopy.Line[3]}mm, 像素=${lineHeight}px`);
    }
    
    dragImage.style.background = 'rgba(240, 240, 240, 0.2)'; // 淡化背景，突出线条
  } else {
    dragImage.textContent = fieldCopy.label;
    // 如果是文本类型且启用了自定义设置，应用自定义字体大小到拖拽预览
    if (fieldCopy.type === 'text' && enableTextCustomization.value) {
      dragImage.style.fontSize = `${customFontSize.value}px`;
    }
    dragImage.style.padding = '5px 10px';
    dragImage.style.background = '#409eff';
    dragImage.style.color = 'white';
    dragImage.style.borderRadius = '3px';
  }
  
  dragImage.style.position = 'absolute';
  dragImage.style.top = '-1000px';
  dragImage.style.zIndex = '9999';
  document.body.appendChild(dragImage);
  
  // 设置拖拽图像
  try {
    // 设置偏移量，使鼠标位于水平线或垂直线的中央
    let offsetX = 0, offsetY = 0;
    
    if (fieldCopy.type === 'line') {
      if (fieldCopy.key.includes('horizontalLine')) {
        offsetX = 0; // 水平线的偏移量
        offsetY = 10; // 确保鼠标位于线条上
      } else {
        offsetX = 10; // 确保鼠标位于线条上
        offsetY = 0; // 垂直线的偏移量
      }
    }
    
    event.dataTransfer.setDragImage(dragImage, offsetX, offsetY);
  } catch (e) {
    console.error('设置拖拽图像失败:', e);
  }
  
  // 清理
  setTimeout(() => {
    document.body.removeChild(dragImage);
  }, 0);
};

// 获取面板标题
const getPanelTitle = () => {
  if (printTemplateFields[printType.value]) {
    return `${printTemplateFields[printType.value].title} - 字段选择（可拖拽字段到画布）`;
  }
  return '打印项目 - 选择需要显示的字段';
};
</script>

<style lang="scss" scoped>
.panel-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.panel-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #dcdfe6;
  color: #409eff;
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  padding-right: 5px;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
}

@media (max-width: 1200px) {
  .checkbox-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .checkbox-grid {
    grid-template-columns: 1fr;
  }
}

.field-section {
  margin-bottom: 20px;
}

.section-header {
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-end;
}

.field-group {
  margin-bottom: 20px;
}

.group-title {
  font-weight: bold;
  color: #606266;
  margin-bottom: 5px;
  border-left: 3px solid #409eff;
  padding-left: 10px;
}

.field-item {
  cursor: grab;
  display: inline-block;
  padding: 2px 0;
  transition: all 0.3s;
}

.field-item:hover {
  color: #409eff;
}

.text-customization-panel {
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #e4e7ed;
}

.customization-title {
  font-weight: bold;
  color: #409eff;
  margin-bottom: 12px;
  font-size: 14px;
}

.customization-controls {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 15px;
}

.control-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.control-label {
  color: #606266;
  font-size: 13px;
}

.customization-preview {
  padding: 10px;
  border: 1px dashed #c0c4cc;
  border-radius: 4px;
  margin-top: 10px;
}

.auto-adjust-control {
  display: flex;
  align-items: center;
  margin-top: 5px;
  padding: 5px;
  background-color: #ecf5ff;
  border-radius: 4px;
}

.preview-title {
  font-size: 13px;
  color: #606266;
  margin-bottom: 8px;
}

.preview-content {
  background-color: white;
  padding: 8px;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid #ebeef5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.line-customization-panel {
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #e4e7ed;
}

.line-preview {
  padding: 10px;
  border: 1px dashed #c0c4cc;
  border-radius: 4px;
  margin-top: 10px;
}

.line-preview-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background-color: white;
  border-radius: 4px;
  border: 1px solid #ebeef5;
}

.preview-line-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.horizontal-line-preview-wrapper {
  padding: 10px 0;
  min-height: 30px;
  display: flex;
  align-items: center;
}

.vertical-line-preview-wrapper {
  padding: 0 10px;
  min-height: 100px;
  display: flex;
  justify-content: center;
}

.horizontal-line-preview {
  height: 2px;
  background-color: #000000;
}

.vertical-line-preview {
  width: 2px;
  background-color: #000000;
}
</style>